<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns:yui="http://yuilibrary.com/rdf/1.0/yui.rdf#">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<title>API: utils   dgrid.js  (YUI Library)</title>

	<link rel="stylesheet" type="text/css" href="assets/reset-fonts-grids-min.css?stamp=1316139452.1" />
	<link rel="stylesheet" type="text/css" href="assets/api.css?stamp=1316139452.1" />

    <script type="text/javascript" src="assets/api-js?stamp=1316139452.1"></script>
    <script type="text/javascript" src="assets/ac-js?stamp=1316139452.1"></script>
</head>

<body id="yahoo-com">

<div id="doc3" class="yui-t2">
	<div id="hd">
        <h1><a href="http://developer.yahoo.com/yui/" title="g-javascript-lib">g-javascript-lib</a></h1>
        <h3>utils&nbsp; <span class="subtitle">1.0.0</span></h3>
        <a href="./index.html" title="g-javascript-lib">g-javascript-lib</a> 
            &gt; <a href="./module_utils.html" title="utils">utils</a>
                
                 &gt; dgrid.js (source view) 
        <form onsubmit="return false">
            <div id="propertysearch">
                Search: <input autocomplete="off" id="searchinput" />
                <div id="searchresults">
                    &nbsp;
                </div>
            </div>
        </form>
	</div>

	<div id="bd">
		<div id="yui-main">
			<div class="yui-b">
            <form action="#" name="yui-classopts-form" method="get" id="yui-classopts-form">
                <fieldset>
                    <legend>Filters</legend>
                <span class="classopts"><input type="checkbox" name="show_private" id="show_private" /> <label for="show_private">Show Private</label></span>
                <span class="classopts"><input type="checkbox" name="show_protected" id="show_protected" /> <label for="show_protected">Show Protected</label></span>
                <span class="classopts"><input type="checkbox" name="show_deprecated" id="show_deprecated" /> <label for="show_deprecated">Show Deprecated</label></span>
                </fieldset>
            </form>

                    <div id="srcout">
                        <style>
                            #doc3 .classopts { display:none; }
                        </style>
<div class="highlight"><pre><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">$</span><span class="p">)</span> <span class="p">{</span>
	<span class="kd">var</span> <span class="nx">_CELL_LINE_WIDTH</span> <span class="o">=</span> <span class="mi">1</span><span class="p">;</span>
	<span class="kd">var</span> <span class="nx">_SCROLL_WIDTH</span> <span class="o">=</span> <span class="mi">16</span><span class="p">;</span>
	<span class="kd">var</span> <span class="nx">_HEADER_HEIGHT</span> <span class="o">=</span> <span class="mi">24</span><span class="p">;</span>
	<span class="kd">var</span> <span class="nx">_ROW_HEIGHT</span> <span class="o">=</span> <span class="mi">20</span><span class="p">;</span>

	<span class="cm">/**</span>
<span class="cm">	 * </span>
<span class="cm">	 * @module widget</span>
<span class="cm">	 * @namespace widget</span>
<span class="cm">	 * @class DataGrid</span>
<span class="cm">	 */</span>
	<span class="nx">DataGrid</span> <span class="o">=</span> <span class="nx">G</span><span class="p">.</span><span class="nx">GClass</span><span class="p">(</span><span class="s1">&#39;Widget&#39;</span><span class="p">,</span> <span class="s1">&#39;DataGrid&#39;</span><span class="p">,</span> <span class="nx">G</span><span class="p">.</span><span class="nx">Base</span><span class="p">.</span><span class="nx">EventListener</span><span class="p">);</span>
	
	<span class="nx">DataGrid</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">__init</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">cols</span><span class="p">)</span> 
	<span class="p">{</span>
		<span class="k">this</span><span class="p">.</span><span class="nx">__Base__EventListener__init</span><span class="p">();</span>

		<span class="k">this</span><span class="p">.</span><span class="nx">config</span> <span class="o">=</span> <span class="p">{</span>
			<span class="nx">selectOnClick</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span>	<span class="c1">// Select the row on click</span>
			<span class="nx">multiSelect</span><span class="o">:</span>   <span class="kc">false</span>	<span class="c1">// Support multiselect by Ctrl+click</span>
		<span class="p">}</span>
		<span class="k">this</span><span class="p">.</span><span class="nx">cols</span> <span class="o">=</span> <span class="nx">cols</span><span class="p">;</span>
		<span class="k">this</span><span class="p">.</span><span class="nx">dragEventHandler</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span>
		<span class="k">this</span><span class="p">.</span><span class="nx">dragEventObj</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span>

		<span class="k">this</span><span class="p">.</span><span class="nx">pageSize</span> <span class="o">=</span> <span class="mi">100</span><span class="p">;</span>

		<span class="k">this</span><span class="p">.</span><span class="nx">dataSource</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span>

		<span class="cm">/* =============Data Source</span>
<span class="cm">		 *    |</span>
<span class="cm">		 *    |</span>
<span class="cm">		 *    |------&gt; Data Offset</span>
<span class="cm">		 *    |    |</span>
<span class="cm">		 *    |    |</span>
<span class="cm">		 *    |    |--&gt; ViewOffset</span>
<span class="cm">		 *    |    | </span>
<span class="cm">		 *    |    | Viewable area &gt;= viewOffset and &lt; ViewEnd.</span>
<span class="cm">		 *    |    |</span>
<span class="cm">		 *    |     --&gt; ViewEnd</span>
<span class="cm">		 *    | </span>
<span class="cm">		 *    |------&gt; End of current page.</span>
<span class="cm">		 *    |</span>
<span class="cm">		 *  =============</span>
<span class="cm">		 */</span>
		<span class="k">this</span><span class="p">.</span><span class="nx">dataOffset</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>	<span class="c1">// start of data</span>
		<span class="k">this</span><span class="p">.</span><span class="nx">viewOffset</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>	<span class="c1">// The first row located in view area.</span>
		<span class="k">this</span><span class="p">.</span><span class="nx">viewEnd</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>		<span class="c1">// The last row located in view area.</span>
		<span class="k">this</span><span class="p">.</span><span class="nx">backRowCount</span> <span class="o">=</span> <span class="mi">1</span><span class="p">;</span>

		<span class="k">this</span><span class="p">.</span><span class="nx">rowCount</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>	<span class="c1">// How many rows in this page</span>
		<span class="k">this</span><span class="p">.</span><span class="nx">scrollOffset</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>	<span class="c1">// scroll offset in page </span>

		<span class="k">this</span><span class="p">.</span><span class="nx">rows</span> <span class="o">=</span> <span class="p">[];</span>			<span class="c1">// row element displayed in the view area.</span>
		<span class="k">this</span><span class="p">.</span><span class="nx">currentRow</span> <span class="o">=</span> <span class="o">-</span><span class="mi">1</span><span class="p">;</span>	<span class="c1">// Current row in the whole page.</span>
		<span class="k">this</span><span class="p">.</span><span class="nx">rowStatus</span> <span class="o">=</span> <span class="p">[];</span>	<span class="c1">// Save the select status of ver rows in page.</span>

		<span class="k">this</span><span class="p">.</span><span class="nx">selectIndicatorCol</span> <span class="o">=</span> <span class="o">-</span><span class="mi">1</span><span class="p">;</span>	<span class="c1">// Which col is the checkbox for selection.</span>

		<span class="k">this</span><span class="p">.</span><span class="nx">rowHeight</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>	<span class="c1">// The height will be set when first row created.</span>
		<span class="k">this</span><span class="p">.</span><span class="nx">scrollX</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>

		<span class="k">this</span><span class="p">.</span><span class="nx">handlerList</span> <span class="o">=</span> <span class="p">{};</span>
	<span class="p">}</span>

	<span class="cm">/**</span>
<span class="cm">	 * Link the grid to a data source. the datagird will show the first page of</span>
<span class="cm">	 * data on data ready.</span>
<span class="cm">	 * @method link_data</span>
<span class="cm">	 */</span>
	<span class="nx">DataGrid</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">link_data</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">dataSource</span><span class="p">)</span> 
	<span class="p">{</span>
		<span class="k">this</span><span class="p">.</span><span class="nx">dataSource</span> <span class="o">=</span> <span class="nx">dataSource</span><span class="p">;</span>
		<span class="k">this</span><span class="p">.</span><span class="nx">dataSource</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s2">&quot;ondataready&quot;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">_on_data_ready</span><span class="p">,</span> <span class="k">this</span><span class="p">);</span>
		<span class="k">this</span><span class="p">.</span><span class="nx">dataSource</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s2">&quot;ontotalchanged&quot;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">_on_total_changed</span><span class="p">,</span> <span class="k">this</span><span class="p">);</span>
		<span class="k">this</span><span class="p">.</span><span class="nx">dataSource</span><span class="p">.</span><span class="nx">get_total</span><span class="p">();</span>
		<span class="k">this</span><span class="p">.</span><span class="nx">go</span><span class="p">(</span><span class="mi">0</span><span class="p">);</span>
	<span class="p">}</span>

	<span class="cm">/**</span>
<span class="cm">	 * Remove all rows in body. and reset the scrollbar</span>
<span class="cm">	 * @method clear_view</span>
<span class="cm">	 */</span>
	<span class="nx">DataGrid</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">clear_view</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> 
	<span class="p">{</span>
		<span class="k">this</span><span class="p">.</span><span class="nx">divBody</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="s2">&quot;&quot;</span><span class="p">;</span>
		<span class="c1">// Reset the scroll bar</span>
		<span class="k">this</span><span class="p">.</span><span class="nx">scbV</span><span class="p">.</span><span class="nx">reset</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">100</span><span class="p">,</span> <span class="mi">100</span><span class="p">);</span>
		<span class="k">this</span><span class="p">.</span><span class="nx">rows</span> <span class="o">=</span> <span class="p">[];</span>
		<span class="k">this</span><span class="p">.</span><span class="nx">rowStatus</span> <span class="o">=</span> <span class="p">[];</span>

		<span class="c1">// clear view</span>
		<span class="k">this</span><span class="p">.</span><span class="nx">viewEnd</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
		<span class="k">this</span><span class="p">.</span><span class="nx">viewOffset</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
		<span class="k">this</span><span class="p">.</span><span class="nx">rowCount</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
	<span class="p">}</span>

	<span class="cm">/* ==========================================================</span>
<span class="cm">	 * Paged Browse functions </span>
<span class="cm">	 * When switch between pages, the whole body of datagrid will </span>
<span class="cm">	 * be clear and redraw.  the row status will be cleared to</span>
<span class="cm">	 * non-selection.</span>
<span class="cm">	 * ==========================================================</span>
<span class="cm">	 */</span>

	<span class="cm">/**</span>
<span class="cm">	 * Get current page number. The number of the first page is 1.</span>
<span class="cm">	 * @method current_page</span>
<span class="cm">	 * @return {integer} the page number</span>
<span class="cm">	 */</span>
	<span class="nx">DataGrid</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">current_page</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> 
	<span class="p">{</span>
		<span class="k">return</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">floor</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">dataOffset</span>  <span class="o">/</span> <span class="k">this</span><span class="p">.</span><span class="nx">pageSize</span><span class="p">)</span> <span class="o">+</span> <span class="mi">1</span><span class="p">;</span>
	<span class="p">}</span>

	<span class="cm">/**</span>
<span class="cm">	 * Get total pages of all data.</span>
<span class="cm">	 * @method page_total</span>
<span class="cm">	 * @return {integer} </span>
<span class="cm">	 */</span>
	<span class="nx">DataGrid</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">page_total</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> 
	<span class="p">{</span>
		<span class="kd">var</span> <span class="nx">len</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">dataTotal</span><span class="p">;</span>
		<span class="k">if</span> <span class="p">(</span><span class="nx">len</span> <span class="o">&lt;</span> <span class="mi">1</span><span class="p">)</span> <span class="p">{</span>
			<span class="k">return</span> <span class="mi">1</span><span class="p">;</span>
		<span class="p">}</span>
		<span class="k">return</span> <span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">floor</span><span class="p">((</span><span class="nx">len</span> <span class="o">-</span> <span class="mi">1</span><span class="p">)</span> <span class="o">/</span> <span class="k">this</span><span class="p">.</span><span class="nx">pageSize</span><span class="p">))</span> <span class="o">+</span> <span class="mi">1</span><span class="p">;</span>
	<span class="p">}</span>

	<span class="cm">/**</span>
<span class="cm">	 * Show next page of data if there are more after this page</span>
<span class="cm">	 * @method next_page</span>
<span class="cm">	 */</span>
	<span class="nx">DataGrid</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">next_page</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> 
	<span class="p">{</span>
		<span class="kd">var</span> <span class="nx">pg</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">current_page</span><span class="p">();</span>
		<span class="kd">var</span> <span class="nx">offset</span> <span class="o">=</span> <span class="nx">pg</span> <span class="o">*</span> <span class="k">this</span><span class="p">.</span><span class="nx">pageSize</span><span class="p">;</span>
		<span class="k">if</span> <span class="p">(</span><span class="nx">offset</span> <span class="o">&gt;=</span> <span class="k">this</span><span class="p">.</span><span class="nx">dataTotal</span><span class="p">)</span> <span class="p">{</span>
			<span class="k">return</span><span class="p">;</span>
		<span class="p">}</span>
		<span class="k">this</span><span class="p">.</span><span class="nx">go</span><span class="p">(</span><span class="nx">offset</span><span class="p">);</span>
	<span class="p">}</span>

	<span class="cm">/**</span>
<span class="cm">	 * Show previous page if it&#39;s not at begining of data.</span>
<span class="cm">	 * @method prev_page</span>
<span class="cm">	 */</span>
	<span class="nx">DataGrid</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">prev_page</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> 
	<span class="p">{</span>
		<span class="kd">var</span> <span class="nx">pg</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">current_page</span><span class="p">();</span>
		<span class="k">if</span> <span class="p">(</span><span class="nx">pg</span> <span class="o">&gt;</span> <span class="mi">1</span><span class="p">)</span> <span class="p">{</span>
			<span class="nx">pg</span> <span class="o">-=</span> <span class="mi">1</span><span class="p">;</span>
			<span class="nx">offset</span> <span class="o">=</span> <span class="p">(</span><span class="nx">pg</span> <span class="o">-</span> <span class="mi">1</span><span class="p">)</span> <span class="o">*</span> <span class="k">this</span><span class="p">.</span><span class="nx">pageSize</span><span class="p">;</span>
			<span class="k">this</span><span class="p">.</span><span class="nx">go</span><span class="p">(</span><span class="nx">offset</span><span class="p">);</span>
		<span class="p">}</span>
	<span class="p">}</span>

	<span class="cm">/**</span>
<span class="cm">	 * Show the last page of data.</span>
<span class="cm">	 * @method last_page</span>
<span class="cm">	 */</span>
	<span class="nx">DataGrid</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">last_page</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> 
	<span class="p">{</span>
		<span class="kd">var</span> <span class="nx">pg</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">page_total</span><span class="p">()</span> <span class="o">-</span> <span class="mi">1</span><span class="p">;</span>
		<span class="kd">var</span> <span class="nx">offset</span> <span class="o">=</span> <span class="nx">pg</span> <span class="o">*</span> <span class="k">this</span><span class="p">.</span><span class="nx">pageSize</span><span class="p">;</span>
		<span class="k">this</span><span class="p">.</span><span class="nx">go</span><span class="p">(</span><span class="nx">offset</span><span class="p">);</span>
	<span class="p">}</span>

	<span class="cm">/**</span>
<span class="cm">	 * Show the first page of data</span>
<span class="cm">	 * @method first_page</span>
<span class="cm">	 */</span>
	<span class="nx">DataGrid</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">first_page</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> 
	<span class="p">{</span>
		<span class="k">this</span><span class="p">.</span><span class="nx">go</span><span class="p">(</span><span class="mi">0</span><span class="p">);</span>
	<span class="p">}</span>

	<span class="cm">/**</span>
<span class="cm">	 * Set the page size. the datagrid will jump to the first page</span>
<span class="cm">	 * after the pagesize changed.</span>
<span class="cm">	 * @method set_page_size</span>
<span class="cm">	 * @param size {integer}</span>
<span class="cm">	 */</span>
	<span class="nx">DataGrid</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">set_page_size</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">size</span><span class="p">)</span>
	<span class="p">{</span>
		<span class="k">this</span><span class="p">.</span><span class="nx">pageSize</span> <span class="o">=</span> <span class="nx">size</span><span class="p">;</span>
		<span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">dataSource</span><span class="p">)</span> <span class="p">{</span>
			<span class="k">this</span><span class="p">.</span><span class="nx">go</span><span class="p">(</span><span class="mi">0</span><span class="p">);</span>
		<span class="p">}</span>
	<span class="p">}</span>

	<span class="cm">/**</span>
<span class="cm">	 * Get a page of data from data source at offset. and show it when data arrived.</span>
<span class="cm">	 * @method go</span>
<span class="cm">	 * @param offset {integer}</span>
<span class="cm">	 */</span>
	<span class="nx">DataGrid</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">go</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">offset</span><span class="p">)</span> 
	<span class="p">{</span>
		<span class="k">this</span><span class="p">.</span><span class="nx">dataSource</span><span class="p">.</span><span class="nx">get_data</span><span class="p">(</span><span class="nx">offset</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">pageSize</span><span class="p">);</span>
	<span class="p">}</span>

	<span class="nx">DataGrid</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">_on_total_changed</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">total</span><span class="p">)</span>
	<span class="p">{</span>
		<span class="k">this</span><span class="p">.</span><span class="nx">dataTotal</span> <span class="o">=</span> <span class="nx">total</span><span class="p">;</span>
	<span class="p">}</span>


	<span class="nx">DataGrid</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">_on_data_ready</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">datapos</span><span class="p">)</span> 
	<span class="p">{</span>
		<span class="k">this</span><span class="p">.</span><span class="nx">dataOffset</span> <span class="o">=</span> <span class="nx">datapos</span><span class="p">.</span><span class="nx">offset</span><span class="p">;</span>
		<span class="k">this</span><span class="p">.</span><span class="nx">scroll</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
		<span class="k">this</span><span class="p">.</span><span class="nx">divCurrentPage</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">current_page</span><span class="p">()</span> <span class="o">+</span> <span class="s2">&quot;/&quot;</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">page_total</span><span class="p">();</span>
		<span class="k">this</span><span class="p">.</span><span class="nx">update</span><span class="p">();</span>
	<span class="p">}</span>

	<span class="cm">/* ==========================================================</span>
<span class="cm">	 * Movement in page area.</span>
<span class="cm">	 * ==========================================================</span>
<span class="cm">	 */</span>
	<span class="cm">/**</span>
<span class="cm">	 * Highlight a row as current. The view area will scroll up ro down if the row</span>
<span class="cm">	 * is out of it.</span>
<span class="cm">	 *</span>
<span class="cm">	 * @method set_current</span>
<span class="cm">	 * @param curr {integer} number of the row. the number of first row is 0</span>
<span class="cm">	 */</span>
	<span class="nx">DataGrid</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">set_current</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">curr</span><span class="p">)</span> 
	<span class="p">{</span>
		<span class="kd">var</span> <span class="nx">old</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">currentRow</span><span class="p">;</span>

		<span class="k">if</span> <span class="p">(</span><span class="nx">curr</span> <span class="o">==</span> <span class="nx">old</span><span class="p">)</span>	<span class="k">return</span><span class="p">;</span>

		<span class="k">if</span> <span class="p">((</span><span class="nx">old</span> <span class="o">&gt;=</span> <span class="k">this</span><span class="p">.</span><span class="nx">viewOffset</span><span class="p">)</span> <span class="o">&amp;&amp;</span> <span class="p">(</span><span class="nx">old</span> <span class="o">&lt;</span> <span class="k">this</span><span class="p">.</span><span class="nx">viewEnd</span><span class="p">))</span> <span class="p">{</span>
			<span class="k">this</span><span class="p">.</span><span class="nx">_update_row_view</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">rows</span><span class="p">[</span><span class="nx">old</span> <span class="o">-</span> <span class="k">this</span><span class="p">.</span><span class="nx">viewOffset</span><span class="p">],</span> <span class="k">this</span><span class="p">.</span><span class="nx">rowStatus</span><span class="p">[</span><span class="nx">old</span><span class="p">]);</span>
		<span class="p">}</span>

		<span class="k">this</span><span class="p">.</span><span class="nx">currentRow</span> <span class="o">=</span> <span class="nx">curr</span><span class="p">;</span>

		<span class="k">if</span> <span class="p">(</span><span class="nx">curr</span> <span class="o">==</span> <span class="k">this</span><span class="p">.</span><span class="nx">viewOffset</span><span class="p">)</span> <span class="p">{</span>
			<span class="c1">// If the first line was partly displayed, change the offset to show all of it.</span>
			<span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">scrollOffset</span> <span class="o">&gt;</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
				<span class="nx">offset</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">viewOffset</span> <span class="o">*</span> <span class="k">this</span><span class="p">.</span><span class="nx">rowHeight</span><span class="p">;</span>
				<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&quot;set offset: &quot;</span> <span class="o">+</span> <span class="nx">offset</span><span class="p">);</span>
				<span class="k">this</span><span class="p">.</span><span class="nx">scbV</span><span class="p">.</span><span class="nx">set_offset</span><span class="p">(</span><span class="nx">offset</span><span class="p">,</span> <span class="kc">true</span><span class="p">);</span>
			<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
				<span class="k">this</span><span class="p">.</span><span class="nx">rows</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">className</span> <span class="o">=</span> <span class="s2">&quot;current&quot;</span><span class="p">;</span>
			<span class="p">}</span>
		<span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">curr</span> <span class="o">&lt;</span> <span class="k">this</span><span class="p">.</span><span class="nx">viewOffset</span><span class="p">)</span> <span class="p">{</span>
			<span class="nx">offset</span> <span class="o">=</span> <span class="nx">curr</span> <span class="o">*</span> <span class="k">this</span><span class="p">.</span><span class="nx">rowHeight</span><span class="p">;</span>
			<span class="k">this</span><span class="p">.</span><span class="nx">scbV</span><span class="p">.</span><span class="nx">set_offset</span><span class="p">(</span><span class="nx">offset</span><span class="p">,</span> <span class="kc">true</span><span class="p">);</span>
		<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
			<span class="kd">var</span> <span class="nx">h</span> <span class="o">=</span> <span class="p">(</span><span class="nx">curr</span> <span class="o">-</span> <span class="k">this</span><span class="p">.</span><span class="nx">viewOffset</span> <span class="o">+</span> <span class="mi">1</span><span class="p">)</span> <span class="o">*</span> <span class="k">this</span><span class="p">.</span><span class="nx">rowHeight</span><span class="p">;</span>
			<span class="k">if</span> <span class="p">(</span><span class="nx">h</span> <span class="o">&gt;</span> <span class="k">this</span><span class="p">.</span><span class="nx">viewHeight</span><span class="p">)</span> <span class="p">{</span>
				<span class="nx">offset</span> <span class="o">=</span> <span class="p">((</span><span class="nx">curr</span> <span class="o">+</span> <span class="mi">1</span><span class="p">)</span> <span class="o">*</span> <span class="k">this</span><span class="p">.</span><span class="nx">rowHeight</span><span class="p">)</span> <span class="o">-</span> <span class="k">this</span><span class="p">.</span><span class="nx">viewHeight</span><span class="p">;</span>
				<span class="k">this</span><span class="p">.</span><span class="nx">scbV</span><span class="p">.</span><span class="nx">set_offset</span><span class="p">(</span><span class="nx">offset</span><span class="p">,</span> <span class="kc">true</span><span class="p">);</span>
			<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
				<span class="k">this</span><span class="p">.</span><span class="nx">rows</span><span class="p">[</span><span class="nx">curr</span> <span class="o">-</span> <span class="k">this</span><span class="p">.</span><span class="nx">viewOffset</span><span class="p">].</span><span class="nx">className</span> <span class="o">=</span> <span class="s2">&quot;current&quot;</span><span class="p">;</span>
			<span class="p">}</span>
		<span class="p">}</span>
		<span class="k">this</span><span class="p">.</span><span class="nx">fire</span><span class="p">(</span><span class="s2">&quot;oncurrentchanged&quot;</span><span class="p">,</span> <span class="p">{</span><span class="nx">old</span><span class="o">:</span> <span class="nx">old</span><span class="p">,</span> <span class="nx">current</span><span class="o">:</span> <span class="nx">curr</span><span class="p">});</span>
	<span class="p">}</span>


	<span class="cm">/*</span>
<span class="cm">	 * Scroll the view area in page, to make the offset at the top of view area. </span>
<span class="cm">	 */</span>
	<span class="nx">DataGrid</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">_scroll_in_page</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">offset</span><span class="p">)</span> 
	<span class="p">{</span>

		<span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">rows</span><span class="p">.</span><span class="nx">length</span> <span class="o">&lt;</span> <span class="mi">1</span><span class="p">)</span>	<span class="k">return</span><span class="p">;</span>

		<span class="kd">var</span> <span class="nx">offsetMax</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">scrollHeight</span> <span class="o">-</span> <span class="k">this</span><span class="p">.</span><span class="nx">viewHeight</span><span class="p">;</span>
		<span class="k">if</span> <span class="p">(</span><span class="nx">offset</span> <span class="o">&gt;</span> <span class="nx">offsetMax</span><span class="p">)</span>	<span class="nx">offset</span> <span class="o">=</span> <span class="nx">offsetMax</span><span class="p">;</span>

		<span class="kd">var</span> <span class="nx">h</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">rowHeight</span><span class="p">;</span>
		<span class="kd">var</span> <span class="nx">viewOffset</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">floor</span><span class="p">(</span><span class="nx">offset</span> <span class="o">/</span> <span class="nx">h</span><span class="p">);</span>			<span class="c1">// Start of row</span>
		<span class="kd">var</span> <span class="nx">scrollOffset</span> <span class="o">=</span> <span class="nx">offset</span> <span class="o">%</span> <span class="nx">h</span><span class="p">;</span>						<span class="c1">// scroll in line</span>
		<span class="kd">var</span> <span class="nx">viewCount</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">floor</span><span class="p">((</span><span class="nx">scrollOffset</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">viewHeight</span> <span class="o">+</span> <span class="nx">h</span> <span class="o">-</span> <span class="mi">1</span><span class="p">)</span> <span class="o">/</span> <span class="nx">h</span><span class="p">);</span>	<span class="c1">// row count need be showed in view.</span>
		<span class="k">this</span><span class="p">.</span><span class="nx">scrollOffset</span> <span class="o">=</span> <span class="nx">scrollOffset</span><span class="p">;</span>
		<span class="kd">var</span> <span class="nx">viewEnd</span> <span class="o">=</span> <span class="nx">viewOffset</span> <span class="o">+</span> <span class="nx">viewCount</span><span class="p">;</span>

		<span class="k">if</span> <span class="p">(</span><span class="nx">viewEnd</span> <span class="o">&gt;</span> <span class="k">this</span><span class="p">.</span><span class="nx">rowCount</span><span class="p">)</span> <span class="p">{</span>
			<span class="nx">viewEnd</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">rowCount</span><span class="p">;</span>
			<span class="nx">viewCount</span> <span class="o">=</span> <span class="nx">viewEnd</span> <span class="o">-</span> <span class="nx">viewOffset</span><span class="p">;</span>
		<span class="p">}</span>

		<span class="kd">var</span> <span class="nx">appendStart</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
		<span class="kd">var</span> <span class="nx">appendEnd</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
		<span class="k">if</span> <span class="p">((</span><span class="nx">viewEnd</span> <span class="o">&lt;=</span> <span class="k">this</span><span class="p">.</span><span class="nx">viewOffset</span><span class="p">)</span> <span class="o">||</span> <span class="p">(</span><span class="nx">viewOffset</span> <span class="o">&gt;=</span> <span class="k">this</span><span class="p">.</span><span class="nx">viewEnd</span><span class="p">))</span> <span class="p">{</span>
			<span class="k">this</span><span class="p">.</span><span class="nx">divBody</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="s2">&quot;&quot;</span><span class="p">;</span>
			<span class="k">this</span><span class="p">.</span><span class="nx">rows</span> <span class="o">=</span> <span class="p">[];</span>

			<span class="nx">appendStart</span> <span class="o">=</span> <span class="nx">viewOffset</span><span class="p">;</span>
			<span class="nx">appendEnd</span> <span class="o">=</span> <span class="nx">viewEnd</span><span class="p">;</span>
		<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
			<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">viewOffset</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">viewOffset</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
				<span class="k">this</span><span class="p">.</span><span class="nx">divBody</span><span class="p">.</span><span class="nx">removeChild</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">rows</span><span class="p">.</span><span class="nx">shift</span><span class="p">());</span>
			<span class="p">}</span>
			<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">viewEnd</span> <span class="o">-</span> <span class="nx">viewEnd</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&gt;</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span><span class="o">--</span><span class="p">)</span> <span class="p">{</span>
				<span class="k">this</span><span class="p">.</span><span class="nx">divBody</span><span class="p">.</span><span class="nx">removeChild</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">rows</span><span class="p">.</span><span class="nx">pop</span><span class="p">());</span>
			<span class="p">}</span>

			<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">viewOffset</span> <span class="o">-</span> <span class="mi">1</span><span class="p">);</span> <span class="nx">i</span> <span class="o">&gt;=</span> <span class="nx">viewOffset</span><span class="p">;</span> <span class="nx">i</span><span class="o">--</span><span class="p">)</span> <span class="p">{</span>
				<span class="kd">var</span> <span class="nx">dat</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">dataSource</span><span class="p">.</span><span class="nx">read</span><span class="p">(</span><span class="nx">i</span><span class="p">);</span>
				<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">dat</span><span class="p">)</span> <span class="k">break</span><span class="p">;</span>
				<span class="kd">var</span> <span class="nx">tr</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">_create_row</span><span class="p">(</span><span class="nx">i</span><span class="p">,</span> <span class="nx">dat</span><span class="p">);</span>
				<span class="k">this</span><span class="p">.</span><span class="nx">divBody</span><span class="p">.</span><span class="nx">insertBefore</span><span class="p">(</span><span class="nx">tr</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">rows</span><span class="p">[</span><span class="mi">0</span><span class="p">]);</span>
				<span class="k">this</span><span class="p">.</span><span class="nx">rows</span><span class="p">.</span><span class="nx">unshift</span><span class="p">(</span><span class="nx">tr</span><span class="p">);</span>
			<span class="p">}</span>
			<span class="nx">appendStart</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">viewEnd</span><span class="p">;</span>
			<span class="nx">appendEnd</span> <span class="o">=</span> <span class="nx">viewEnd</span><span class="p">;</span>
		<span class="p">}</span>

		<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="nx">appendStart</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">appendEnd</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
			<span class="kd">var</span> <span class="nx">dat</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">dataSource</span><span class="p">.</span><span class="nx">read</span><span class="p">(</span><span class="nx">i</span><span class="p">);</span> 
			<span class="kd">var</span> <span class="nx">tr</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">_create_row</span><span class="p">(</span><span class="nx">i</span><span class="p">,</span> <span class="nx">dat</span><span class="p">);</span>
			<span class="k">this</span><span class="p">.</span><span class="nx">divBody</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">tr</span><span class="p">);</span>
			<span class="k">this</span><span class="p">.</span><span class="nx">rows</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">tr</span><span class="p">);</span>
		<span class="p">}</span>

		<span class="k">this</span><span class="p">.</span><span class="nx">viewOffset</span> <span class="o">=</span> <span class="nx">viewOffset</span><span class="p">;</span>
		<span class="k">this</span><span class="p">.</span><span class="nx">viewEnd</span> <span class="o">=</span> <span class="nx">viewEnd</span><span class="p">;</span>
		<span class="k">this</span><span class="p">.</span><span class="nx">divBodyField</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">marginTop</span> <span class="o">=</span> <span class="mi">0</span> <span class="o">-</span> <span class="nx">scrollOffset</span><span class="p">;</span>


		<span class="cm">/* Make sure background have enough rows to full fill the body */</span>
		<span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">backRowCount</span><span class="p">;</span>
		<span class="kd">var</span> <span class="nx">cnt</span> <span class="o">=</span> <span class="nx">viewEnd</span> <span class="o">-</span> <span class="nx">viewOffset</span><span class="p">;</span>

		<span class="k">if</span> <span class="p">(</span><span class="nx">i</span> <span class="o">!=</span> <span class="nx">cnt</span><span class="p">)</span> <span class="p">{</span>
			<span class="k">for</span> <span class="p">(;</span> <span class="nx">i</span> <span class="o">&gt;</span> <span class="nx">cnt</span><span class="p">;</span> <span class="nx">i</span><span class="o">--</span><span class="p">)</span> <span class="p">{</span>
				<span class="k">this</span><span class="p">.</span><span class="nx">divBodyBack</span><span class="p">.</span><span class="nx">removeChild</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">divBodyBack</span><span class="p">.</span><span class="nx">childNodes</span><span class="p">[</span><span class="nx">i</span><span class="o">-</span><span class="mi">1</span><span class="p">]);</span>
			<span class="p">}</span>
			<span class="k">for</span> <span class="p">(;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">cnt</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
				<span class="kd">var</span> <span class="nx">div</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">&#39;div&#39;</span><span class="p">);</span>
				<span class="nx">div</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="s2">&quot;dgrid_row_back&quot;</span> <span class="o">+</span> <span class="p">(</span><span class="nx">i</span> <span class="o">&amp;</span> <span class="mh">0x01</span><span class="p">);</span>
				<span class="k">this</span><span class="p">.</span><span class="nx">divBodyBack</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">div</span><span class="p">);</span>
			<span class="p">}</span>
			<span class="k">this</span><span class="p">.</span><span class="nx">backRowCount</span> <span class="o">=</span> <span class="nx">i</span><span class="p">;</span>
		<span class="p">}</span>
		<span class="k">this</span><span class="p">.</span><span class="nx">_update_row_status</span><span class="p">();</span>
	<span class="p">}</span>


	<span class="nx">DataGrid</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">_create_row</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">rowIndex</span><span class="p">,</span> <span class="nx">dat</span><span class="p">)</span> 
	<span class="p">{</span>
		<span class="kd">var</span> <span class="nx">tr</span><span class="p">;</span>
		<span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">rows</span><span class="p">.</span><span class="nx">length</span> <span class="o">&gt;</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
			<span class="nx">tr</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">rows</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">cloneNode</span><span class="p">(</span><span class="kc">true</span><span class="p">);</span>
			<span class="nx">tr</span><span class="p">.</span><span class="nx">removeAttribute</span><span class="p">(</span><span class="s2">&quot;className&quot;</span><span class="p">);</span>
		<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
			<span class="nx">tr</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">divHead</span><span class="p">.</span><span class="nx">cloneNode</span><span class="p">(</span><span class="kc">true</span><span class="p">);</span>
			<span class="nx">tr</span><span class="p">.</span><span class="nx">removeAttribute</span><span class="p">(</span><span class="s2">&quot;className&quot;</span><span class="p">);</span>
			<span class="nx">tr</span><span class="p">.</span><span class="nx">removeAttribute</span><span class="p">(</span><span class="s2">&quot;style&quot;</span><span class="p">);</span>
		<span class="p">}</span>
		<span class="kd">var</span> <span class="nx">datIndex</span> <span class="o">=</span> <span class="nx">rowIndex</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">dataOffset</span><span class="p">;</span>

		<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="k">this</span><span class="p">.</span><span class="nx">cols</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
			<span class="kd">var</span> <span class="nx">col</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">cols</span><span class="p">[</span><span class="nx">i</span><span class="p">];</span>
			<span class="kd">var</span> <span class="nx">cell</span> <span class="o">=</span> <span class="nx">tr</span><span class="p">.</span><span class="nx">childNodes</span><span class="p">[</span><span class="nx">i</span><span class="p">];</span>

			<span class="k">if</span> <span class="p">(</span><span class="nx">col</span><span class="p">.</span><span class="nx">type</span> <span class="o">==</span> <span class="s1">&#39;data&#39;</span><span class="p">)</span> <span class="p">{</span>
				<span class="k">if</span> <span class="p">(</span><span class="k">typeof</span><span class="p">(</span><span class="nx">col</span><span class="p">.</span><span class="nx">format</span><span class="p">)</span> <span class="o">==</span> <span class="s1">&#39;function&#39;</span><span class="p">)</span> <span class="p">{</span>
					<span class="nx">col</span><span class="p">.</span><span class="nx">format</span><span class="p">(</span><span class="nx">cell</span><span class="p">,</span> <span class="nx">dat</span><span class="p">);</span>	
				<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
					<span class="nx">cell</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">dat</span><span class="p">[</span><span class="nx">col</span><span class="p">.</span><span class="nx">key</span><span class="p">];</span>
				<span class="p">}</span>
			<span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">col</span><span class="p">.</span><span class="nx">type</span> <span class="o">==</span> <span class="s1">&#39;index&#39;</span><span class="p">)</span> <span class="p">{</span>
				<span class="nx">cell</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">datIndex</span> <span class="o">+</span> <span class="mi">1</span><span class="p">;</span>
			<span class="p">}</span>
		<span class="p">}</span>

		<span class="kd">var</span> <span class="nx">st</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">rowStatus</span><span class="p">[</span><span class="nx">rowIndex</span><span class="p">];</span>
		<span class="k">this</span><span class="p">.</span><span class="nx">_update_row_view</span><span class="p">(</span><span class="nx">tr</span><span class="p">,</span> <span class="nx">st</span><span class="p">);</span>
		<span class="k">return</span> <span class="nx">tr</span><span class="p">;</span>
	<span class="p">}</span>



	<span class="nx">DataGrid</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">_create_nav</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> 
	<span class="p">{</span>
		<span class="kd">var</span> <span class="nx">divNavView</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">&#39;div&#39;</span><span class="p">);</span>
		<span class="nx">divNavView</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="s2">&quot;dgrid_nav&quot;</span><span class="p">;</span>

		<span class="kd">var</span> <span class="nx">divFirstPage</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">&#39;a&#39;</span><span class="p">);</span>
		<span class="kd">var</span> <span class="nx">divPrevPage</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">&#39;a&#39;</span><span class="p">);</span>
		<span class="kd">var</span> <span class="nx">divNextPage</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">&#39;a&#39;</span><span class="p">);</span>
		<span class="kd">var</span> <span class="nx">divLastPage</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">&#39;a&#39;</span><span class="p">);</span>
		<span class="kd">var</span> <span class="nx">divPage</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">&#39;input&#39;</span><span class="p">);</span>

		<span class="nx">divFirstPage</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="s2">&quot;dgrid_btn_first&quot;</span><span class="p">;</span>
		<span class="nx">divPrevPage</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="s2">&quot;dgrid_btn_prev&quot;</span><span class="p">;</span>
		<span class="nx">divNextPage</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="s2">&quot;dgrid_btn_next&quot;</span><span class="p">;</span>
		<span class="nx">divLastPage</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="s2">&quot;dgrid_btn_last&quot;</span><span class="p">;</span>

		<span class="nx">divFirstPage</span><span class="p">.</span><span class="nx">href</span> <span class="o">=</span> <span class="s2">&quot;#&quot;</span><span class="p">;</span>
		<span class="nx">divPrevPage</span><span class="p">.</span><span class="nx">href</span> <span class="o">=</span> <span class="s2">&quot;#&quot;</span><span class="p">;</span>
		<span class="nx">divNextPage</span><span class="p">.</span><span class="nx">href</span> <span class="o">=</span> <span class="s2">&quot;#&quot;</span><span class="p">;</span>
		<span class="nx">divLastPage</span><span class="p">.</span><span class="nx">href</span> <span class="o">=</span> <span class="s2">&quot;#&quot;</span><span class="p">;</span>

		<span class="nx">divNavView</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">divLastPage</span><span class="p">);</span>
		<span class="nx">divNavView</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">divNextPage</span><span class="p">);</span>
		<span class="nx">divNavView</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">divPage</span><span class="p">);</span>
		<span class="nx">divNavView</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">divPrevPage</span><span class="p">);</span>
		<span class="nx">divNavView</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">divFirstPage</span><span class="p">);</span>

		<span class="nx">divPage</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
		<span class="k">this</span><span class="p">.</span><span class="nx">divPage</span> <span class="o">=</span> <span class="nx">divPage</span><span class="p">;</span>
		<span class="k">this</span><span class="p">.</span><span class="nx">divNavView</span> <span class="o">=</span> <span class="nx">divNavView</span><span class="p">;</span>
		<span class="k">this</span><span class="p">.</span><span class="nx">divCurrentPage</span> <span class="o">=</span> <span class="nx">divPage</span><span class="p">;</span>
		<span class="k">this</span><span class="p">.</span><span class="nx">divGrid</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">divNavView</span><span class="p">);</span>

		<span class="k">this</span><span class="p">.</span><span class="nx">btnFirstPage</span> <span class="o">=</span> <span class="nx">G</span><span class="p">(</span><span class="nx">divFirstPage</span><span class="p">);</span>
		<span class="k">this</span><span class="p">.</span><span class="nx">btnPrevPage</span> <span class="o">=</span> <span class="nx">G</span><span class="p">(</span><span class="nx">divPrevPage</span><span class="p">);</span>
		<span class="k">this</span><span class="p">.</span><span class="nx">btnNextPage</span> <span class="o">=</span> <span class="nx">G</span><span class="p">(</span><span class="nx">divNextPage</span><span class="p">);</span>
		<span class="k">this</span><span class="p">.</span><span class="nx">btnLastPage</span> <span class="o">=</span> <span class="nx">G</span><span class="p">(</span><span class="nx">divLastPage</span><span class="p">);</span>

		<span class="k">this</span><span class="p">.</span><span class="nx">btnFirstPage</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s2">&quot;onclick&quot;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">first_page</span><span class="p">,</span> <span class="k">this</span><span class="p">);</span>
		<span class="k">this</span><span class="p">.</span><span class="nx">btnPrevPage</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s2">&quot;onclick&quot;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">prev_page</span><span class="p">,</span> <span class="k">this</span><span class="p">);</span>
		<span class="k">this</span><span class="p">.</span><span class="nx">btnNextPage</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s2">&quot;onclick&quot;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">next_page</span><span class="p">,</span> <span class="k">this</span><span class="p">);</span>
		<span class="k">this</span><span class="p">.</span><span class="nx">btnLastPage</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s2">&quot;onclick&quot;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">last_page</span><span class="p">,</span> <span class="k">this</span><span class="p">);</span>
	<span class="p">}</span>

	<span class="nx">DataGrid</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">_create_head</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> 
	<span class="p">{</span>
		<span class="kd">var</span> <span class="nx">w</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
		<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="k">in</span> <span class="k">this</span><span class="p">.</span><span class="nx">cols</span><span class="p">)</span> <span class="p">{</span>
			<span class="kd">var</span> <span class="nx">col</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">cols</span><span class="p">[</span><span class="nx">i</span><span class="p">];</span>
			<span class="kd">var</span> <span class="nx">cell</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">&#39;div&#39;</span><span class="p">);</span>
			<span class="nx">cell</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">width</span> <span class="o">=</span> <span class="nx">col</span><span class="p">.</span><span class="nx">width</span><span class="p">;</span>

			<span class="k">if</span> <span class="p">(</span><span class="nx">col</span><span class="p">.</span><span class="nx">type</span> <span class="o">==</span> <span class="s1">&#39;select&#39;</span><span class="p">)</span> <span class="p">{</span>
				<span class="kd">var</span> <span class="nx">chkSelectAll</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">&#39;input&#39;</span><span class="p">);</span>
				<span class="nx">chkSelectAll</span><span class="p">.</span><span class="nx">type</span><span class="o">=</span><span class="s2">&quot;checkbox&quot;</span><span class="p">;</span>
				<span class="k">this</span><span class="p">.</span><span class="nx">selectIndicatorCol</span> <span class="o">=</span> <span class="nx">i</span><span class="p">;</span>
				<span class="nx">cell</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">chkSelectAll</span><span class="p">);</span>
			<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
				<span class="nx">cell</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">col</span><span class="p">.</span><span class="nx">name</span><span class="p">;</span>
			<span class="p">}</span>

			<span class="k">this</span><span class="p">.</span><span class="nx">divHead</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">cell</span><span class="p">);</span>
			<span class="nx">w</span> <span class="o">+=</span> <span class="nx">cell</span><span class="p">.</span><span class="nx">offsetWidth</span><span class="p">;</span>
		<span class="p">}</span>
		<span class="k">this</span><span class="p">.</span><span class="nx">divHead</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">width</span> <span class="o">=</span> <span class="nx">w</span><span class="p">;</span>
		<span class="k">this</span><span class="p">.</span><span class="nx">divBody</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">width</span> <span class="o">=</span> <span class="nx">w</span><span class="p">;</span>
		<span class="k">this</span><span class="p">.</span><span class="nx">divBodyBack</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">width</span> <span class="o">=</span> <span class="nx">w</span><span class="p">;</span>
	<span class="p">}</span>

	<span class="nx">DataGrid</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">_create_body_back</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> 
	<span class="p">{</span>
		<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="k">this</span><span class="p">.</span><span class="nx">backRowCount</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
			<span class="kd">var</span> <span class="nx">div</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">&#39;div&#39;</span><span class="p">);</span>
			<span class="nx">div</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="s2">&quot;dgrid_row_back&quot;</span> <span class="o">+</span> <span class="p">(</span><span class="nx">i</span> <span class="o">&amp;</span> <span class="mh">0x01</span><span class="p">);</span>
			<span class="k">this</span><span class="p">.</span><span class="nx">divBodyBack</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">div</span><span class="p">);</span>
		<span class="p">}</span>

	<span class="p">}</span>


	<span class="nx">DataGrid</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">_resize</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">w</span><span class="p">,</span> <span class="nx">h</span><span class="p">)</span> 
	<span class="p">{</span>
		<span class="k">this</span><span class="p">.</span><span class="nx">divGrid</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">width</span> <span class="o">=</span> <span class="nx">w</span><span class="p">;</span>
		<span class="k">this</span><span class="p">.</span><span class="nx">divGrid</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">height</span> <span class="o">=</span> <span class="nx">h</span><span class="p">;</span>

		<span class="nx">w</span> <span class="o">-=</span> <span class="k">this</span><span class="p">.</span><span class="nx">divScrollY</span><span class="p">.</span><span class="nx">offsetWidth</span><span class="p">;</span>
		<span class="k">this</span><span class="p">.</span><span class="nx">divScrollY</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">left</span> <span class="o">=</span> <span class="nx">w</span><span class="p">;</span>
		<span class="k">this</span><span class="p">.</span><span class="nx">divScrollY</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">height</span> <span class="o">=</span> <span class="nx">h</span><span class="p">;</span>

		<span class="kd">var</span> <span class="nx">offsetH</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">divHeadView</span><span class="p">.</span><span class="nx">offsetHeight</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">divNavView</span><span class="p">.</span><span class="nx">offsetHeight</span><span class="p">;</span>
		<span class="k">this</span><span class="p">.</span><span class="nx">divScrollY</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">top</span> <span class="o">=</span> <span class="nx">offsetH</span><span class="p">;</span>

		<span class="nx">h</span> <span class="o">-=</span> <span class="nx">offsetH</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">divScrollX</span><span class="p">.</span><span class="nx">offsetHeight</span><span class="p">;</span>
		<span class="k">this</span><span class="p">.</span><span class="nx">divBodyView</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">height</span> <span class="o">=</span> <span class="nx">h</span><span class="p">;</span>
		<span class="k">this</span><span class="p">.</span><span class="nx">divScrollY</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">height</span> <span class="o">=</span> <span class="nx">h</span><span class="p">;</span>
		<span class="k">this</span><span class="p">.</span><span class="nx">viewHeight</span> <span class="o">=</span> <span class="nx">h</span><span class="p">;</span>

		<span class="k">this</span><span class="p">.</span><span class="nx">divScrollX</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">width</span> <span class="o">=</span> <span class="nx">w</span><span class="p">;</span>
		<span class="k">this</span><span class="p">.</span><span class="nx">divScrollX</span><span class="p">.</span><span class="nx">left</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>

		<span class="k">this</span><span class="p">.</span><span class="nx">scbH</span><span class="p">.</span><span class="nx">reset</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">divHeadView</span><span class="p">.</span><span class="nx">clientWidth</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">divHead</span><span class="p">.</span><span class="nx">offsetWidth</span><span class="p">);</span>
		<span class="k">this</span><span class="p">.</span><span class="nx">update</span><span class="p">();</span>

	<span class="p">}</span>

	<span class="cm">/*</span>
<span class="cm">	 * Recalculate the size of scroll bar</span>
<span class="cm">	 */</span>
	<span class="nx">DataGrid</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">_update_scroll_bar_v</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> 
	<span class="p">{</span>
		<span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">rowCount</span> <span class="o">&lt;=</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
			<span class="k">this</span><span class="p">.</span><span class="nx">scrollHeight</span> <span class="o">=</span> <span class="mi">100</span><span class="p">;</span>
			<span class="k">this</span><span class="p">.</span><span class="nx">scbv</span><span class="p">.</span><span class="nx">reset</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">100</span><span class="p">,</span> <span class="mi">100</span><span class="p">);</span>
			<span class="k">return</span><span class="p">;</span>
		<span class="p">}</span> 
		<span class="kd">var</span> <span class="nx">h</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">rowCount</span> <span class="o">*</span> <span class="k">this</span><span class="p">.</span><span class="nx">rowHeight</span><span class="p">;</span>
		<span class="k">if</span> <span class="p">(</span><span class="nx">h</span> <span class="o">&lt;</span> <span class="k">this</span><span class="p">.</span><span class="nx">divBodyView</span><span class="p">.</span><span class="nx">clientHeight</span><span class="p">)</span> <span class="p">{</span>
			<span class="nx">h</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">divBodyView</span><span class="p">.</span><span class="nx">clientHeight</span><span class="p">;</span>
		<span class="p">}</span>
		<span class="k">this</span><span class="p">.</span><span class="nx">scrollHeight</span> <span class="o">=</span> <span class="nx">h</span><span class="p">;</span>

		<span class="k">this</span><span class="p">.</span><span class="nx">scbV</span><span class="p">.</span><span class="nx">reset</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">divBodyView</span><span class="p">.</span><span class="nx">clientHeight</span><span class="p">,</span> <span class="nx">h</span><span class="p">);</span>
		<span class="k">this</span><span class="p">.</span><span class="nx">_scroll_in_page</span><span class="p">(</span><span class="mi">0</span><span class="p">);</span>
	<span class="p">}</span>


	<span class="nx">DataGrid</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">update</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> 
	<span class="p">{</span>
		<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">dataSource</span><span class="p">)</span>	<span class="k">return</span><span class="p">;</span>

		<span class="k">this</span><span class="p">.</span><span class="nx">clear_view</span><span class="p">();</span>
		<span class="kd">var</span> <span class="nx">rowCount</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">dataSource</span><span class="p">.</span><span class="nx">get_page_len</span><span class="p">();</span>

		<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">rowCount</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>

			<span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">divBody</span><span class="p">.</span><span class="nx">offsetHeight</span> <span class="o">&gt;=</span> <span class="k">this</span><span class="p">.</span><span class="nx">divBodyView</span><span class="p">.</span><span class="nx">offsetHeight</span><span class="p">)</span>	<span class="k">break</span><span class="p">;</span>
			<span class="kd">var</span> <span class="nx">dat</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">dataSource</span><span class="p">.</span><span class="nx">step_in_page</span><span class="p">();</span>
			<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">dat</span><span class="p">)</span> <span class="k">break</span><span class="p">;</span>

			<span class="kd">var</span> <span class="nx">tr</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">_create_row</span><span class="p">(</span><span class="nx">i</span><span class="p">,</span> <span class="nx">dat</span><span class="p">);</span>
			<span class="k">this</span><span class="p">.</span><span class="nx">divBody</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">tr</span><span class="p">);</span>
			<span class="k">this</span><span class="p">.</span><span class="nx">rows</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span> <span class="o">=</span> <span class="nx">tr</span><span class="p">;</span>
			<span class="k">this</span><span class="p">.</span><span class="nx">rowHeight</span> <span class="o">=</span> <span class="nx">tr</span><span class="p">.</span><span class="nx">offsetHeight</span><span class="p">;</span>
		<span class="p">}</span>

		<span class="c1">// How many rows displayed in view box.</span>
		<span class="k">this</span><span class="p">.</span><span class="nx">viewEnd</span> <span class="o">=</span> <span class="nx">i</span><span class="p">;</span>

		<span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">rowCount</span> <span class="o">!=</span> <span class="nx">rowCount</span><span class="p">)</span> <span class="p">{</span>
			<span class="k">this</span><span class="p">.</span><span class="nx">rowCount</span> <span class="o">=</span> <span class="nx">rowCount</span><span class="p">;</span>
			<span class="k">this</span><span class="p">.</span><span class="nx">_update_scroll_bar_v</span><span class="p">();</span>
		<span class="p">}</span>
	<span class="p">}</span>


	<span class="nx">DataGrid</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">render</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">em</span><span class="p">)</span> 
	<span class="p">{</span>
		<span class="k">this</span><span class="p">.</span><span class="nx">container</span> <span class="o">=</span> <span class="nx">em</span><span class="p">;</span>

		<span class="kd">var</span> <span class="nx">divGrid</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">&#39;div&#39;</span><span class="p">);</span>
		<span class="nx">divGrid</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="s2">&quot;dgrid&quot;</span><span class="p">;</span>
		<span class="nx">em</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">divGrid</span><span class="p">);</span>
		<span class="k">this</span><span class="p">.</span><span class="nx">divGrid</span> <span class="o">=</span> <span class="nx">divGrid</span><span class="p">;</span>

		<span class="k">this</span><span class="p">.</span><span class="nx">_create_nav</span><span class="p">();</span>

		<span class="c1">// Create Header</span>
		<span class="nx">hdView</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">&#39;div&#39;</span><span class="p">);</span>
		<span class="nx">hd</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">&#39;div&#39;</span><span class="p">);</span>
		<span class="nx">hdView</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="s1">&#39;dgrid_header&#39;</span><span class="p">;</span>
		<span class="nx">hdView</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">hd</span><span class="p">);</span>
		<span class="nx">divGrid</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">hdView</span><span class="p">);</span>
		
		<span class="c1">// Create Body</span>
		<span class="c1">// BodyView --&gt; BodyField --&gt; BodyBack + Body</span>
		<span class="nx">bdView</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">&#39;div&#39;</span><span class="p">);</span>
		<span class="nx">bdField</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">&#39;div&#39;</span><span class="p">);</span>
		<span class="nx">bdBack</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">&#39;div&#39;</span><span class="p">);</span>
		<span class="nx">bd</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">&#39;div&#39;</span><span class="p">);</span>

		<span class="nx">bdView</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="s1">&#39;dgrid_body_view&#39;</span><span class="p">;</span>
		<span class="nx">bdField</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="s1">&#39;dgrid_body_field&#39;</span><span class="p">;</span>
		<span class="nx">bdBack</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="s2">&quot;dgrid_body_back&quot;</span><span class="p">;</span>
		<span class="nx">bd</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="s2">&quot;dgrid_body&quot;</span><span class="p">;</span>

		<span class="nx">bdField</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">bd</span><span class="p">);</span>
		<span class="nx">bdField</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">bdBack</span><span class="p">);</span>
		<span class="nx">bdView</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">bdField</span><span class="p">);</span>
		<span class="nx">divGrid</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">bdView</span><span class="p">);</span>


		<span class="c1">// Create Scroll Bar.</span>
		<span class="nx">scy</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">&#39;div&#39;</span><span class="p">);</span>
		<span class="nx">scy</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="s1">&#39;dgrid_scroll_y&#39;</span><span class="p">;</span>
		<span class="nx">scx</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">&#39;div&#39;</span><span class="p">);</span>
		<span class="nx">scx</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="s1">&#39;dgrid_scroll_x&#39;</span><span class="p">;</span>
		<span class="nx">divGrid</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">scy</span><span class="p">);</span>
		<span class="nx">divGrid</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">scx</span><span class="p">);</span>

		<span class="k">this</span><span class="p">.</span><span class="nx">divHead</span> <span class="o">=</span> <span class="nx">hd</span><span class="p">;</span>
		<span class="k">this</span><span class="p">.</span><span class="nx">divHeadView</span> <span class="o">=</span> <span class="nx">hdView</span><span class="p">;</span>
		<span class="k">this</span><span class="p">.</span><span class="nx">divBody</span> <span class="o">=</span> <span class="nx">bd</span><span class="p">;</span>
		<span class="k">this</span><span class="p">.</span><span class="nx">divBodyView</span> <span class="o">=</span> <span class="nx">bdView</span><span class="p">;</span>
		<span class="k">this</span><span class="p">.</span><span class="nx">body</span> <span class="o">=</span> <span class="nx">G</span><span class="p">(</span><span class="nx">bdView</span><span class="p">);</span>
		<span class="k">this</span><span class="p">.</span><span class="nx">divBodyField</span> <span class="o">=</span> <span class="nx">bdField</span><span class="p">;</span>
		<span class="k">this</span><span class="p">.</span><span class="nx">divBodyBack</span> <span class="o">=</span> <span class="nx">bdBack</span><span class="p">;</span>
		<span class="k">this</span><span class="p">.</span><span class="nx">divScrollY</span><span class="o">=</span> <span class="nx">scy</span><span class="p">;</span>
		<span class="k">this</span><span class="p">.</span><span class="nx">divScrollX</span><span class="o">=</span> <span class="nx">scx</span><span class="p">;</span>

		<span class="c1">// Draw col headers</span>
		<span class="k">this</span><span class="p">.</span><span class="nx">_create_head</span><span class="p">();</span>

		<span class="k">this</span><span class="p">.</span><span class="nx">_create_body_back</span><span class="p">();</span>

		<span class="c1">// Create scroll bar.</span>
		<span class="k">this</span><span class="p">.</span><span class="nx">scbV</span> <span class="o">=</span> <span class="nx">G</span><span class="p">(</span><span class="nx">scy</span><span class="p">).</span><span class="nx">ScrollBar</span><span class="p">(</span><span class="s1">&#39;V&#39;</span><span class="p">);</span>
		<span class="k">this</span><span class="p">.</span><span class="nx">scbH</span> <span class="o">=</span> <span class="nx">G</span><span class="p">(</span><span class="nx">scx</span><span class="p">).</span><span class="nx">ScrollBar</span><span class="p">(</span><span class="s1">&#39;H&#39;</span><span class="p">);</span>

		<span class="k">this</span><span class="p">.</span><span class="nx">scbH</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s2">&quot;onscroll&quot;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">ev</span><span class="p">){</span>
			<span class="k">this</span><span class="p">.</span><span class="nx">divHead</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">marginLeft</span> <span class="o">=</span> <span class="o">-</span><span class="nx">ev</span><span class="p">.</span><span class="nx">offset</span><span class="p">;</span>
			<span class="k">this</span><span class="p">.</span><span class="nx">divBodyField</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">marginLeft</span> <span class="o">=</span> <span class="o">-</span><span class="nx">ev</span><span class="p">.</span><span class="nx">offset</span><span class="p">;</span>
			<span class="k">this</span><span class="p">.</span><span class="nx">scrollX</span> <span class="o">=</span> <span class="nx">ev</span><span class="p">.</span><span class="nx">offset</span><span class="p">;</span>
		<span class="p">},</span> <span class="k">this</span><span class="p">);</span>

		<span class="k">this</span><span class="p">.</span><span class="nx">scbV</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s2">&quot;onscroll&quot;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">ev</span><span class="p">)</span> <span class="p">{</span>
			<span class="k">this</span><span class="p">.</span><span class="nx">_scroll_in_page</span><span class="p">(</span><span class="nx">ev</span><span class="p">.</span><span class="nx">offset</span><span class="p">);</span>
		<span class="p">},</span> <span class="k">this</span><span class="p">);</span>

		<span class="k">this</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s2">&quot;onclick&quot;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">_on_body_click</span><span class="p">,</span> <span class="k">this</span><span class="p">);</span>
		<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&quot;bind keypress&quot;</span><span class="p">);</span>
		<span class="k">this</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s2">&quot;onkeypress&quot;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">_on_keypress</span><span class="p">,</span> <span class="k">this</span><span class="p">);</span>

		<span class="k">this</span><span class="p">.</span><span class="nx">_resize</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">container</span><span class="p">.</span><span class="nx">clientWidth</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">container</span><span class="p">.</span><span class="nx">clientHeight</span><span class="p">);</span>

		<span class="nx">G</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">container</span><span class="p">).</span><span class="nx">bind</span><span class="p">(</span><span class="s2">&quot;onresize&quot;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">ev</span><span class="p">)</span> <span class="p">{</span>
			<span class="k">this</span><span class="p">.</span><span class="nx">_resize</span><span class="p">(</span><span class="nx">ev</span><span class="p">.</span><span class="nx">w</span><span class="p">,</span> <span class="nx">ev</span><span class="p">.</span><span class="nx">h</span><span class="p">);</span>
		<span class="p">},</span> <span class="k">this</span><span class="p">);</span>
	<span class="p">}</span>

	<span class="cm">/* </span>
<span class="cm">	 * Get the row and col number of the the cell the point locate in.</span>
<span class="cm">	 * */</span>
	<span class="nx">DataGrid</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">get_cell_from_position</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">x</span><span class="p">,</span> <span class="nx">y</span><span class="p">)</span> 
	<span class="p">{</span>
		<span class="kd">var</span> <span class="nx">row</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">floor</span><span class="p">((</span><span class="nx">y</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">scrollOffset</span><span class="p">)</span> <span class="o">/</span> <span class="k">this</span><span class="p">.</span><span class="nx">rowHeight</span><span class="p">);</span>
		<span class="nx">row</span> <span class="o">+=</span> <span class="k">this</span><span class="p">.</span><span class="nx">viewOffset</span><span class="p">;</span>

		<span class="nx">x</span> <span class="o">+=</span> <span class="k">this</span><span class="p">.</span><span class="nx">scrollX</span><span class="p">;</span>

		<span class="kd">var</span> <span class="nx">cells</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">divHead</span><span class="p">.</span><span class="nx">childNodes</span><span class="p">;</span>
		<span class="kd">var</span> <span class="nx">len</span> <span class="o">=</span> <span class="nx">cells</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span>
		<span class="k">for</span> <span class="p">(</span><span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">len</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
			<span class="nx">x</span> <span class="o">-=</span> <span class="nx">cells</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">offsetWidth</span><span class="p">;</span>
			<span class="k">if</span> <span class="p">(</span><span class="nx">x</span> <span class="o">&lt;</span> <span class="mi">0</span><span class="p">)</span>	<span class="k">break</span><span class="p">;</span>
		<span class="p">}</span>
		<span class="k">return</span> <span class="p">{</span><span class="nx">row</span><span class="o">:</span> <span class="nx">row</span><span class="p">,</span> <span class="nx">col</span><span class="o">:</span> <span class="nx">i</span><span class="p">};</span>
	<span class="p">}</span>
	

	<span class="nx">DataGrid</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">_on_body_click</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">ev</span><span class="p">)</span> 
	<span class="p">{</span>
		<span class="kd">var</span> <span class="nx">orig</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">get_offset_in_page</span><span class="p">();</span>
		<span class="kd">var</span> <span class="nx">pos</span> <span class="o">=</span> <span class="nx">G</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nx">get_mouse</span><span class="p">(</span><span class="nx">ev</span><span class="p">);</span>
		<span class="kd">var</span> <span class="nx">y</span> <span class="o">=</span> <span class="nx">pos</span><span class="p">.</span><span class="nx">y</span> <span class="o">-</span> <span class="nx">orig</span><span class="p">.</span><span class="nx">top</span><span class="p">;</span>
		<span class="kd">var</span> <span class="nx">x</span> <span class="o">=</span> <span class="nx">pos</span><span class="p">.</span><span class="nx">x</span> <span class="o">-</span> <span class="nx">orig</span><span class="p">.</span><span class="nx">left</span><span class="p">;</span>

		<span class="kd">var</span> <span class="nx">cell</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">get_cell_from_position</span><span class="p">(</span><span class="nx">x</span><span class="p">,</span> <span class="nx">y</span><span class="p">);</span>

		<span class="k">if</span> <span class="p">((</span><span class="k">this</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">selectOnClick</span><span class="p">)</span> <span class="o">||</span> <span class="p">(</span><span class="nx">cell</span><span class="p">.</span><span class="nx">col</span> <span class="o">==</span> <span class="k">this</span><span class="p">.</span><span class="nx">selectIndicatorCol</span><span class="p">))</span> <span class="p">{</span>
			<span class="k">this</span><span class="p">.</span><span class="nx">switch_select</span><span class="p">(</span><span class="nx">cell</span><span class="p">.</span><span class="nx">row</span><span class="p">);</span>
		<span class="p">}</span>
		<span class="k">this</span><span class="p">.</span><span class="nx">set_current</span><span class="p">(</span><span class="nx">cell</span><span class="p">.</span><span class="nx">row</span><span class="p">);</span>
	<span class="p">}</span>

	<span class="nx">DataGrid</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">_on_keypress</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">ev</span><span class="p">)</span>
	<span class="p">{</span>
		<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">ev</span><span class="p">.</span><span class="nx">keyCode</span><span class="p">);</span>
	<span class="p">}</span>


	<span class="nx">DataGrid</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">switch_select</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">rowIndex</span><span class="p">)</span> 
	<span class="p">{</span>
		<span class="kd">var</span> <span class="nx">selected</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
		<span class="k">if</span> <span class="p">(</span><span class="nx">rowIndex</span> <span class="o">&lt;</span> <span class="k">this</span><span class="p">.</span><span class="nx">rowCount</span><span class="p">)</span> <span class="p">{</span>
			<span class="k">if</span> <span class="p">(</span><span class="k">typeof</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">rowStatus</span><span class="p">[</span><span class="nx">rowIndex</span><span class="p">])</span> <span class="o">!=</span> <span class="s2">&quot;object&quot;</span><span class="p">)</span> <span class="p">{</span>
				<span class="k">this</span><span class="p">.</span><span class="nx">rowStatus</span><span class="p">[</span><span class="nx">rowIndex</span><span class="p">]</span> <span class="o">=</span> <span class="p">{</span>
					<span class="nx">selected</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
					<span class="nx">marked</span><span class="o">:</span> <span class="kc">false</span>
				<span class="p">}</span>
				<span class="nx">selected</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
			<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
				<span class="nx">selected</span> <span class="o">=</span> <span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">rowStatus</span><span class="p">[</span><span class="nx">rowIndex</span><span class="p">].</span><span class="nx">selected</span><span class="p">;</span>
				<span class="k">this</span><span class="p">.</span><span class="nx">rowStatus</span><span class="p">[</span><span class="nx">rowIndex</span><span class="p">].</span><span class="nx">selected</span> <span class="o">=</span> <span class="nx">selected</span><span class="p">;</span>
			<span class="p">}</span>
		<span class="p">}</span>

		<span class="k">if</span> <span class="p">((</span><span class="nx">rowIndex</span> <span class="o">&gt;=</span> <span class="k">this</span><span class="p">.</span><span class="nx">viewOffset</span><span class="p">)</span> <span class="o">&amp;&amp;</span> <span class="p">(</span><span class="nx">rowIndex</span> <span class="o">&lt;</span> <span class="k">this</span><span class="p">.</span><span class="nx">viewEnd</span><span class="p">))</span> <span class="p">{</span>
			<span class="c1">// Update the background color of the row.</span>
			<span class="kd">var</span> <span class="nx">r</span> <span class="o">=</span> <span class="nx">rowIndex</span> <span class="o">-</span> <span class="k">this</span><span class="p">.</span><span class="nx">viewOffset</span><span class="p">;</span>
			<span class="k">this</span><span class="p">.</span><span class="nx">_update_row_view</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">rows</span><span class="p">[</span><span class="nx">r</span><span class="p">],</span> <span class="k">this</span><span class="p">.</span><span class="nx">rowStatus</span><span class="p">[</span><span class="nx">rowIndex</span><span class="p">]);</span>
		<span class="p">}</span>
	<span class="p">}</span>


	<span class="nx">DataGrid</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">_update_row_view</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">row</span><span class="p">,</span> <span class="nx">st</span><span class="p">)</span> 
	<span class="p">{</span>
		<span class="kd">var</span> <span class="nx">selected</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
		<span class="k">if</span> <span class="p">((</span><span class="k">typeof</span><span class="p">(</span><span class="nx">st</span><span class="p">)</span> <span class="o">==</span> <span class="s2">&quot;object&quot;</span><span class="p">)</span> <span class="o">&amp;&amp;</span> <span class="nx">st</span><span class="p">.</span><span class="nx">selected</span><span class="p">)</span> <span class="p">{</span>
			<span class="nx">row</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="s2">&quot;selected&quot;</span><span class="p">;</span>
			<span class="nx">selected</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
		<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
			<span class="nx">row</span><span class="p">.</span><span class="nx">removeAttribute</span><span class="p">(</span><span class="s2">&quot;className&quot;</span><span class="p">);</span>
			<span class="nx">row</span><span class="p">.</span><span class="nx">removeAttribute</span><span class="p">(</span><span class="s2">&quot;class&quot;</span><span class="p">);</span>
		<span class="p">}</span>
		<span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">selectIndicatorCol</span> <span class="o">&gt;=</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
			<span class="kd">var</span> <span class="nx">cell</span> <span class="o">=</span> <span class="nx">row</span><span class="p">.</span><span class="nx">childNodes</span><span class="p">[</span><span class="k">this</span><span class="p">.</span><span class="nx">selectIndicatorCol</span><span class="p">];</span>
			<span class="kd">var</span> <span class="nx">sel</span> <span class="o">=</span> <span class="nx">cell</span><span class="p">.</span><span class="nx">childNodes</span><span class="p">[</span><span class="mi">0</span><span class="p">];</span>
			<span class="nx">sel</span><span class="p">.</span><span class="nx">checked</span> <span class="o">=</span> <span class="nx">selected</span><span class="p">;</span>
		<span class="p">}</span>
	<span class="p">}</span>


	<span class="nx">DataGrid</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">_update_row_status</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> 
	<span class="p">{</span>
		<span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">currentRow</span> <span class="o">&gt;=</span> <span class="k">this</span><span class="p">.</span><span class="nx">viewOffset</span> <span class="o">&amp;&amp;</span> <span class="k">this</span><span class="p">.</span><span class="nx">currentRow</span> <span class="o">&lt;</span> <span class="k">this</span><span class="p">.</span><span class="nx">viewEnd</span><span class="p">)</span> <span class="p">{</span>
			<span class="k">this</span><span class="p">.</span><span class="nx">rows</span><span class="p">[</span><span class="k">this</span><span class="p">.</span><span class="nx">currentRow</span> <span class="o">-</span> <span class="k">this</span><span class="p">.</span><span class="nx">viewOffset</span><span class="p">].</span><span class="nx">className</span> <span class="o">=</span> <span class="s2">&quot;current&quot;</span><span class="p">;</span>
		<span class="p">}</span>
	<span class="p">}</span>

	<span class="nx">G</span><span class="p">.</span><span class="nx">DOM</span><span class="p">.</span><span class="nx">Element</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">DataGrid</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">cols</span><span class="p">)</span> <span class="p">{</span>
		<span class="kd">var</span> <span class="nx">grid</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">DataGrid</span><span class="p">(</span><span class="nx">cols</span><span class="p">);</span>
		<span class="nx">grid</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">em</span><span class="p">);</span>
		<span class="k">return</span> <span class="nx">grid</span><span class="p">;</span>
	<span class="p">}</span>
<span class="p">})();</span>
</pre></div>
                    </div>
			</div>
		</div>
		<div class="yui-b">
            <div class="nav">

                    <div id="moduleList" class="module">
                        <h4>Modules</h4>
                        <ul class="content">
                                <li class=""><a href="module_base.html" title="base">base</a></li>
                                <li class=""><a href="module_svg.html" title="svg">svg</a></li>
                                <li class=""><a href="module_test.html" title="test">test</a></li>
                                <li class="selected"><a href="module_utils.html" title="utils">utils</a></li>
                                <li class=""><a href="module_widget.html" title="widget">widget</a></li>
                        </ul>
                    </div>

                    <div id="classList" class="module">
                        <h4>Classes</h4>
                        <ul class="content">
                                <li class=""><a href="Test.Array.html" title="Test.Array">Test.Array</a></li>
                                <li class=""><a href="Test.List.html" title="Test.List">Test.List</a></li>
                                <li class=""><a href="Test.ListNode.html" title="Test.ListNode">Test.ListNode</a></li>
                                <li class=""><a href="Utils.TreeNode.html" title="Utils.TreeNode">Utils.TreeNode</a></li>
                                <li class=""><a href="widget.DataSource.html" title="widget.DataSource">widget.DataSource</a></li>
                                <li class=""><a href="widget.DataSourceArray.html" title="widget.DataSourceArray">widget.DataSourceArray</a></li>
                        </ul>
                    </div>

                    <div id="fileList" class="module">
                        <h4>Files</h4>
                        <ul class="content">        
                                <li class=""><a href="barview.js.html" title="barview.js">barview.js</a></li>
                                <li class=""><a href="datasource.js.html" title="datasource.js">datasource.js</a></li>
                                <li class="selected"><a href="dgrid.js.html" title="dgrid.js">dgrid.js</a></li>
                                <li class=""><a href="list.js.html" title="list.js">list.js</a></li>
                                <li class=""><a href="tree.js.html" title="tree.js">tree.js</a></li>
                                <li class=""><a href="xml.js.html" title="xml.js">xml.js</a></li>
                        </ul>
                    </div>





            </div>
		</div>
	</div>
	<div id="ft">
        <hr />
        Copyright &copy; 2011 Yahoo! Inc. All rights reserved.
	</div>
</div>
<script type="text/javascript">
    ALL_YUI_PROPS = [{"url": "Test.List.html#method_append", "access": "", "host": "Test.List", "type": "method", "name": "append"}, {"url": "Utils.TreeNode.html#method_append_child", "access": "", "host": "Utils.TreeNode", "type": "method", "name": "append_child"}, {"url": "Test.List.html#method_clear", "access": "", "host": "Test.List", "type": "method", "name": "clear"}, {"url": "Utils.TreeNode.html#method_disconnect", "access": "", "host": "Utils.TreeNode", "type": "method", "name": "disconnect"}, {"url": "Utils.TreeNode.html#method_dump", "access": "", "host": "Utils.TreeNode", "type": "method", "name": "dump"}, {"url": "Utils.TreeNode.html#method_get_child_count", "access": "", "host": "Utils.TreeNode", "type": "method", "name": "get_child_count"}, {"url": "widget.DataSourceArray.html#method_get_data", "access": "", "host": "widget.DataSourceArray", "type": "method", "name": "get_data"}, {"url": "Utils.TreeNode.html#method_get_deep", "access": "", "host": "Utils.TreeNode", "type": "method", "name": "get_deep"}, {"url": "Utils.TreeNode.html#method_get_father", "access": "", "host": "Utils.TreeNode", "type": "method", "name": "get_father"}, {"url": "Utils.TreeNode.html#method_get_fullname", "access": "", "host": "Utils.TreeNode", "type": "method", "name": "get_fullname"}, {"url": "widget.DataSourceArray.html#method_get_total", "access": "", "host": "widget.DataSourceArray", "type": "method", "name": "get_total"}, {"url": "Test.List.html#method_has_only_one", "access": "", "host": "Test.List", "type": "method", "name": "has_only_one"}, {"url": "Utils.TreeNode.html#method___init", "access": "", "host": "Utils.TreeNode", "type": "method", "name": "__init"}, {"url": "Test.List.html#method_insert", "access": "", "host": "Test.List", "type": "method", "name": "insert"}, {"url": "Test.Array.html#method_insertAt", "access": "", "host": "Test.Array", "type": "method", "name": "insertAt"}, {"url": "Test.List.html#method_is_empty", "access": "", "host": "Test.List", "type": "method", "name": "is_empty"}, {"url": "Utils.TreeNode.html#method_move", "access": "", "host": "Utils.TreeNode", "type": "method", "name": "move"}, {"url": "Test.List.html#method_remove", "access": "", "host": "Test.List", "type": "method", "name": "remove"}, {"url": "Test.Array.html#method_removeAt", "access": "", "host": "Test.Array", "type": "method", "name": "removeAt"}, {"url": "Utils.TreeNode.html#method_remove_child", "access": "", "host": "Utils.TreeNode", "type": "method", "name": "remove_child"}, {"url": "Test.List.html#method_search", "access": "", "host": "Test.List", "type": "method", "name": "search"}, {"url": "Utils.TreeNode.html#method_search", "access": "", "host": "Utils.TreeNode", "type": "method", "name": "search"}, {"url": "widget.DataSourceArray.html#method_step_in_page", "access": "", "host": "widget.DataSourceArray", "type": "method", "name": "step_in_page"}];
</script>
</body>
</html>
